<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--在这里写你的css-->
<div th:fragment="stylesheet">

</div>
<!--在这里写你的内容-->

<body id="test" th:fragment="content">
<div class="panel" style="padding: 10px">
    <div class="panel-heading">
        <h3 class="panel-title">查看病人健康档案</h3>
    </div>
    <div class="panel-body">
        <div style="text-align: right">
            手机号码：<input id="searchTelId" type="text" class="form-control" style="width: 100px;display: inline">
            <button id="search" class="btn btn-default">搜索</button>
        </div>
        <table id="table" class="table table-striped table-hover">
            <thead>
            <tr>
                <th>用户编号</th>
                <th>手机号</th>
                <th>负责医生编号</th>
                <th>职业</th>
                <th>婚姻状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr th:each="healthRecord:${healthRecords}">
                <td style="width: 10%" th:text="${healthRecord.healthRecordId}"></td>
                <td style="width: 10%" th:text="${healthRecord.telephone}"></td>
                <td style="width: 10%" th:text="${healthRecord.doctorId}"></td>
                <td style="width: 10%" th:text="${healthRecord.occupation}"></td>
                <td style="width: 10%" th:text="${healthRecord.maritalStatus}"></td>
                <td style="width: 10%">
                    <nobr>
                        <button th:id="'edit'+${healthRecord.healthRecordId}" class="btn btn-success btn-sm"
                                style="padding: 6px"
                                th:data-id="${healthRecord.healthRecordId}" data-target="#detailModal"
                                data-toggle="modal">详情
                        </button>
                        <button th:id="'edit'+${healthRecord.healthRecordId}" class="btn btn-primary btn-sm"
                                style="padding: 6px"
                                th:data-id="${healthRecord.healthRecordId}" data-target="#editModal"
                                data-toggle="modal">编辑
                        </button>
                        <button th:id="'del'+${healthRecord.healthRecordId}" class="btn btn-danger btn-sm"
                                style="padding: 6px"
                                th:data-id="${healthRecord.healthRecordId}" data-target="#delModal"
                                data-toggle="modal">删除
                        </button>
                    </nobr>
                </td>
            </tr>

            </tbody>

        </table>
        <div id="paginationBar" style="text-align: center; bottom: 0%; position: center">
            <ul id="pageLimit"></ul>
        </div>
    </div>
</div>


<!-- END FILTER COLUMN -->

<!-- 删除-模态框（Modal） -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="delModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                <input id="idDel" type="text" class="hidden">
                <p>确定删除？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToDel" type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 编辑-模态框（Modal） -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="editModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                <input id="idValue" type="text" class="hidden">
                <form name="update_health_info">
                    <div>
                        <div class="box-body col-md-4">
                            <label for="healthRecordId">档案编号</label>
                            <input id="healthRecordId" type="text" class="form-control" placeholder="输入档案编号"
                                   readonly="readonly">
                            <br>
                            <label for="telephone">手机号码</label>
                            <input id="telephone" type="text" class="form-control" placeholder="输入手机号码">
                            <br>
                            <label for="selRegistrationId">自助挂号编号</label>
                            <input id="selRegistrationId" type="text" class="form-control" placeholder="输入自助挂号编号">
                            <br>
                            <label for="furReturnId">复诊编号</label>
                            <input id="furReturnId" type="text" class="form-control" placeholder="输入复诊编号">
                            <br>
                            <label for="recordBuildorganization">档案创建单位</label>
                            <input id="recordBuildorganization" type="text" class="form-control" placeholder="输入档案创建单位">
                            <br>
                            <label for="recordCreatedate">档案创建时间</label>
                            <input id="recordCreatedate" type="text" class="form-control" placeholder="输入档案创建时间">
                            <br>
                            <label for="occupation">职业</label>
                            <input id="occupation" type="text" class="form-control" placeholder="输入职业">
                            <br>
                            <label for="maritalStatus">婚姻情况</label>
                            <input id="maritalStatus" type="text" class="form-control" placeholder="输入婚姻情况">
                            <br>
                        </div>
                        <div class="box-body col-md-4">
                            <label for="drugallergyHistory">过敏史</label>
                            <input id="drugallergyHistory" type="text" class="form-control" placeholder="输入过敏史">
                            <br>
                            <label for="expousreHistory">暴露史</label>
                            <input id="expousreHistory" type="text" class="form-control" placeholder="输入暴露史">
                            <br>
                            <label for="diseaseHistory">疾病史</label>
                            <input id="diseaseHistory" type="text" class="form-control" placeholder="输入疾病史">
                            <br>
                            <label for="disability">残疾</label>
                            <input id="disability" type="text" class="form-control" placeholder="输入残疾">
                            <br>
                            <label for="symptom">症状</label>
                            <input id="symptom" type="text" class="form-control" placeholder="输入症状">
                            <br>
                            <label for="exercise">锻炼情况</label>
                            <input id="exercise" type="text" class="form-control" placeholder="输入锻炼情况">
                            <br>
                            <label for="eatingHabit">饮食情况</label>
                            <input id="eatingHabit" type="text" class="form-control" placeholder="输入饮食情况">
                            <br>
                            <label for="smoking">吸烟情况</label>
                            <input id="smoking" type="text" class="form-control" placeholder="输入吸烟情况">
                            <br>
                        </div>
                        <div class="box-body col-md-4">
                            <label for="drinking">饮酒情况</label>
                            <input id="drinking" type="text" class="form-control" placeholder="输入饮酒情况">
                            <br>
                            <label for="paymentMethod">支付方式</label>
                            <input id="paymentMethod" type="text" class="form-control" placeholder="输入支付方式">
                            <br>
                            <label for="livingEnvironment">生活环境</label>
                            <input id="livingEnvironment" type="text" class="form-control" placeholder="输入生活环境">
                            <br>
                            <label for="physicalexamId">体检编号</label>
                            <input id="physicalexamId" type="text" class="form-control" placeholder="输入体检编号">
                            <br>
                            <label for="clinicId">诊所编号</label>
                            <input id="clinicId" type="text" class="form-control" placeholder="输入诊所编号">
                            <br>
                            <label for="registrationId">挂号编号</label>
                            <input id="registrationId" type="text" class="form-control" placeholder="输入挂号编号">
                            <br>
                            <label for="returnId">复诊编号</label>
                            <input id="returnId" type="text" class="form-control" placeholder="输入复诊编号">
                            <br>
                            <label for="doctorId">责任医生编号</label>
                            <input id="doctorId" type="text" class="form-control" placeholder="输入责任医生编号">
                            <br>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToUpdate" type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--详情-模态框（Modal）-->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel"
     aria-hidden="true">
    <div class="modal-dialog"  style="width: 1000px">
        <div class="modal-content" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="detailModalLabel">
                    详细信息
                </h4>
            </div>

            <table>
                <td style="width: 400px; text-indent:4em">
                    <p id="d_healthRecordId"></p>
                    <p id="d_telephone"></p>
                    <p id="d_selRegistrationId"></p>
                    <p id="d_furReturnId"></p>
                    <p id="d_recordBuildorganization"></p>
                    <p id="d_recordCreatedate"></p>
                    <p id="d_occupation"></p>
                    <p id="d_maritalStatus"></p>
                </td>
                <td style="width: 400px">
                    <p id="d_drugallergyHistory"></p>
                    <p id="d_expousreHistory"></p>
                    <p id="d_diseaseHistory"></p>
                    <p id="d_disability"></p>
                    <p id="d_symptom"></p>
                    <p id="d_exercise"></p>
                    <p id="d_eatingHabit"></p>
                    <p id="d_smoking"></p>
                </td>
                <td style="width: 400px">
                    <p id="d_drinking"></p>
                    <p id="d_paymentMethod"></p>
                    <p id="d_livingEnvironment"></p>
                    <p id="d_physicalexamId"></p>
                    <p id="d_clinicId"></p>
                    <p id="d_registrationId"></p>
                    <p id="d_returnId"></p>
                    <p id="d_recentStateId"></p>
                </td>
            </table>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</body>
<!--在这里定义或者引用你的script-->
<div th:fragment="script">

    <script>
        //删除
        $("#delModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            // alert(JSON.stringify(button))
            var id = button.data('id') //取得data-id 的值
            var modal = $(this)
            modal.find('.modal-body p').text('确定要删除编号为 ' + id + "的健康档案吗")
            modal.find('.modal-body input').val(id)
        })
        $("#sureToDel").click(function () {
            var idDel = $("#idDel").val()
            $.post(
                "/healthRecord/delete",
                {id: idDel},
                function () {
                    alert("删除成功")
                    $("#test").load(location.href + "#test");
                }
            )
        })

        //编辑
        $("#editModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/healthRecord/selectById",
                {id: id},
                function (data) {
                    var healthRecord = data.value;
                    modal.find('#healthRecordId').val(healthRecord.healthRecordId)
                    modal.find('#telephone').val(healthRecord.telephone)
                    modal.find('#selRegistrationId').val(healthRecord.selRegistrationId)
                    modal.find('#furReturnId').val(healthRecord.furReturnId)
                    modal.find('#recordBuildorganization').val(healthRecord.recordBuildorganization)
                    modal.find('#recordCreatedate').val(healthRecord.recordCreatedate)
                    modal.find('#occupation').val(healthRecord.occupation)
                    modal.find('#maritalStatus').val(healthRecord.maritalStatus)
                    modal.find('#drugallergyHistory').val(healthRecord.drugallergyHistory)
                    modal.find('#expousreHistory').val(healthRecord.expousreHistory)
                    modal.find('#diseaseHistory').val(healthRecord.diseaseHistory)
                    modal.find('#disability').val(healthRecord.disability)
                    modal.find('#symptom').val(healthRecord.symptom)
                    modal.find('#exercise').val(healthRecord.exercise)
                    modal.find('#eatingHabit').val(healthRecord.eatingHabit)
                    modal.find('#smoking').val(healthRecord.smoking)
                    modal.find('#drinking').val(healthRecord.drinking)
                    modal.find('#paymentMethod').val(healthRecord.paymentMethod)
                    modal.find('#livingEnvironment').val(healthRecord.livingEnvironment)
                    modal.find('#physicalexamId').val(healthRecord.physicalexamId)
                    modal.find('#clinicId').val(healthRecord.clinicId)
                    modal.find('#registrationId').val(healthRecord.registrationId)
                    modal.find('#returnId').val(healthRecord.returnId)
                    modal.find('#doctorId').val(healthRecord.doctorId)
                }
            )
        })
        $("#sureToUpdate").click(function () {
            $.post(
                "/healthRecord/edit",
                {
                    healthRecordId: $("#healthRecordId").val(),
                    telephone: $("#telephone").val(),
                    selRegistrationId: $("#selRegistrationId").val(),
                    furReturnId: $("#furReturnId").val(),
                    recordBuildorganization: $("#recordBuildorganization").val(),
                    recordCreatedate: $("#recordCreatedate").val(),
                    occupation: $("#occupation").val(),
                    maritalStatus: $("#maritalStatus").val(),
                    drugallergyHistory: $("#drugallergyHistory").val(),
                    expousreHistory: $("#expousreHistory").val(),
                    diseaseHistory: $("#diseaseHistory").val(),
                    disability: $("#disability").val(),
                    exercise: $("#exercise").val(),
                    eatingHabit: $("#eatingHabit").val(),
                    smoking: $("#smoking").val(),
                    drinking: $("#drinking").val(),
                    livingEnvironment: $("#livingEnvironment").val(),
                    physicalexamId: $("#physicalexamId").val(),
                    clinicId: $("#clinicId").val(),
                    registrationId: $("#registrationId").val(),
                    returnId: $("#returnId").val(),
                    doctorId: $("#doctorId").val(),
                },
                function (data) {
                    if(data.code==200){
                        alert("修改成功")
                        $("#test").load(location.href + "#test");
                    }else
                        alert("修改失败")
                }
            )
        })

        //详细信息
        $("#detailModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/healthRecord/selectById",
                {id: id},
                function (data) {
                    var healthRecord = data.value;
                    modal.find('#d_healthRecordId').text("档案编号：" + healthRecord.healthRecordId)
                    modal.find('#d_telephone').text("手机号码：" + healthRecord.telephone)
                    modal.find('#d_selRegistrationId').text("自助挂号编号：" + healthRecord.selRegistrationId)
                    modal.find('#d_furReturnId').text("复诊编号：" + healthRecord.furReturnId)
                    modal.find('#d_recordBuildorganization').text("档案创建单位：" + healthRecord.recordBuildorganization)
                    modal.find('#d_recordCreatedate').text("档案创建时间：" + healthRecord.recordCreatedate)
                    modal.find('#d_occupation').text("职业：" + healthRecord.occupation)
                    modal.find('#d_maritalStatus').text("婚姻状况：" + healthRecord.maritalStatus)
                    modal.find('#d_drugallergyHistory').text("过敏史：" + healthRecord.drugallergyHistory)
                    modal.find('#d_expousreHistory').text("暴露史：" + healthRecord.expousreHistory)
                    modal.find('#d_diseaseHistory').text("疾病史：" + healthRecord.diseaseHistory)
                    modal.find('#d_disability').text("残疾：" + healthRecord.disability)
                    modal.find('#d_symptom').text("症状：" + healthRecord.symptom)
                    modal.find('#d_exercise').text("断锻炼情况：" + healthRecord.exercise)
                    modal.find('#d_eatingHabit').text("饮食习惯：" + healthRecord.eatingHabit)
                    modal.find('#d_smoking').text("吸烟情况：" + healthRecord.smoking)
                    modal.find('#d_drinking').text("饮酒情况：" + healthRecord.drinking)
                    modal.find('#d_paymentMethod').text("支付方式：" + healthRecord.paymentMethod)
                    modal.find('#d_livingEnvironment').text("生活环境：" + healthRecord.livingEnvironment)
                    modal.find('#d_physicalexamId').text("体检编号：" + healthRecord.physicalexamId)
                    modal.find('#d_clinicId').text("诊所编号：" + healthRecord.clinicId)
                    modal.find('#d_registrationId').text("挂号编号：" + healthRecord.registrationId)
                    modal.find('#d_returnId').text("复诊编号：" + healthRecord.returnId)
                    modal.find('#d_doctorId').text("责任医生编号：" + healthRecord.doctorId)
                }
            )
        })
    </script>

    <script src="/static/common/assets/vendor/paginator/bootstrap-paginator.min.js"></script>
    <script>
        $("#search").click(function () {
            var id = $("#searchTelId").val();
            if ($.trim(id) == "") {
                $("#test").load("/doctor/lookUpHealthRecord?pages=1");//重新加载整个<body>,定位到第一页
            }
            else if (id != "") {
                $.get(
                    "/healthRecord/selectById",
                    {id: id},
                    function (data) {
                        $("#tbody").html("");
                        $("#paginationBar").html("");
                        var healthRecord = data.value;
                        var str =
                            "<tr>" +
                            "<td style=\"width: 10%\" >" + healthRecord.healthRecordId + "</td>\n" +
                            "<td style=\"width: 10%\" >" + healthRecord.telephone + "</td>\n" +
                            "<td style=\"width: 10%\" >" + healthRecord.doctorId + "</td>\n" +
                            "<td style=\"width: 10%\" >" + healthRecord.occupation + "</td>\n" +
                            "<td style=\"width: 10%\" >" + healthRecord.maritalStatus + "</td>\n" +
                            "<td style=\"width: 10%\" >\n" +
                            "    <nobr>\n" +
                            "        <button th:id=detail" + healthRecord.healthRecordId + " class=\"btn btn-success btn-sm\" style=\"padding: 6px\" data-id=" + healthRecord.healthRecordId + " data-target=\"#detailModal\" data-toggle=\"modal\">详情</button>\n" +
                            "        <button th:id=edit" + healthRecord.healthRecordId + " class=\"btn btn-primary btn-sm\" style=\"padding: 6px\" data-id=" + healthRecord.healthRecordId + " data-target=\"#editModal\" data-toggle=\"modal\">编辑</button>\n" +
                            "        <button id=del" + healthRecord.id + " class=\"btn btn-danger btn-sm\" style=\"padding: 6px\"   data-id=" + healthRecord.telephone + " data-target=\"#delModal\" data-toggle=\"modal\">删除</button>\n" +
                            "    </nobr>\n" +
                            "</td>"
                        "</tr>";

                        $("#tbody").html(str);

                    }
                )
            }
        })
    </script>

    <script th:inline="javascript" type='text/javascript'>
        var max = [[${maxPage}]];
        var cur = [[${currentPage}]];
        $('#pageLimit').bootstrapPaginator({
            currentPage: cur,
            totalPages: max + 1,
            size: "normal",
            bootstrapMajorVersion: 3,
            alignment: "right",
            numberOfPages: 5,
            // pageUrl:function(type, page, current){
            //     return "/test/hospitalInfo?page="+page
            // },
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },//改写分页按钮字样
            onPageClicked: function (event, originalEvent, type, page) {
                //根据点击的页面，刷新整个body
                // $("#test").load("/test/hospitalInfo?page=" + page);
            }
        });
    </script>


</div>

</html>